<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description"content="{{site.description}}">
    <meta name="keywords" content="{{site.keywords}}"/>
    <meta property="og:title" content="{{site.title}}" />
    <meta property="og:description" content="{{site.description}}" />
    <title>{{site.title}}-{{site.name}}</title>
    {{include './common/css.html'}}
</head>
<body class="font-sans bg-gray-50">
    {{include './common/header.html'}}
    <!-- 页面内容 -->
    <main class="pt-20 pb-12">
        <!-- 技术介绍 -->
        <section class="py-12 bg-white">
            <div class="container mx-auto px-4">
                {{@ frag["page-solid"]}}
                <!-- <h1 class="text-4xl font-bold text-center mb-8">固废处理技术</h1>
                
                <div class="max-w-4xl mx-auto mb-12">
                    <h2 class="text-2xl font-semibold mb-4">核心技术</h2>
                    <div class="grid md:grid-cols-2 gap-6">
                        <div class="bg-gray-50 p-6 rounded-lg">
                            <i class="fas fa-trash-alt text-blue-600 text-3xl mb-3"></i>
                            <h3 class="font-medium text-lg mb-2">垃圾分类技术</h3>
                            <p class="text-gray-600">采用智能分拣系统，实现固废精准分类，提高资源回收率。</p>
                        </div>
                        <div class="bg-gray-50 p-6 rounded-lg">
                            <i class="fas fa-fire text-blue-600 text-3xl mb-3"></i>
                            <h3 class="font-medium text-lg mb-2">焚烧发电技术</h3>
                            <p class="text-gray-600">高温焚烧处理，热能回收发电，实现能源化利用。</p>
                        </div>
                        <div class="bg-gray-50 p-6 rounded-lg">
                            <i class="fas fa-recycle text-blue-600 text-3xl mb-3"></i>
                            <h3 class="font-medium text-lg mb-2">资源化利用技术</h3>
                            <p class="text-gray-600">将可回收物转化为再生资源，减少原生资源消耗。</p>
                        </div>
                        <div class="bg-gray-50 p-6 rounded-lg">
                            <i class="fas fa-landmark text-blue-600 text-3xl mb-3"></i>
                            <h3 class="font-medium text-lg mb-2">填埋场修复技术</h3>
                            <p class="text-gray-600">对历史填埋场进行生态修复，消除环境污染。</p>
                        </div>
                    </div>
                </div> -->
                
                <!-- 技术流程图 -->
                <!-- <div class="max-w-4xl mx-auto mb-12">
                    <h2 class="text-2xl font-semibold mb-4">处理流程</h2>
                    <div class="bg-gray-50 p-6 rounded-lg">
                        <img src="./imgs/gtcl.jpg" alt="固废处理流程" class="w-full h-auto rounded">
                        <div class="mt-4 grid md:grid-cols-4 gap-4 text-center">
                            <div class="bg-blue-100 p-2 rounded">
                                <p class="font-medium">收集运输</p>
                                <p class="text-sm text-gray-600">专业收运体系</p>
                            </div>
                            <div class="bg-blue-100 p-2 rounded">
                                <p class="font-medium">分类处理</p>
                                <p class="text-sm text-gray-600">智能分拣系统</p>
                            </div>
                            <div class="bg-blue-100 p-2 rounded">
                                <p class="font-medium">资源化利用</p>
                                <p class="text-sm text-gray-600">回收可再生资源</p>
                            </div>
                            <div class="bg-blue-100 p-2 rounded">
                                <p class="font-medium">无害化处置</p>
                                <p class="text-sm text-gray-600">安全环保处理</p>
                            </div>
                        </div>
                    </div>
                </div> -->
            </div>
        </section>
        
        <!-- 工程案例 -->
        <section class="py-12 bg-gray-50">
            <div class="container mx-auto px-4">
                <h2 class="text-3xl font-bold text-center mb-8">工程案例</h2>
                {{if articleList?.list?.length > 0}}
                <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
                    {{each articleList?.list}}
                    <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow">
                        <a href="{{$value.path}}/article-{{$value.id}}.html" class="text-blue-600 font-medium">
                            <img src="{{$value?.img}}" alt="市政污水处理项目" class="w-full h-48 object-cover">
                        </a>
                        <div class="p-6">
                            <h3 class="text-xl font-semibold mb-2">{{$value?.title}}</h3>
                            <div class="text-gray-600">
                                <!-- <i class="fas fa-calendar-alt mr-2 text-blue-600"></i> -->
                                {{@ $value?.description}}
                            </div>
                            <!-- <p class="text-gray-600 mb-2"><i class="fas fa-calendar-alt mr-2 text-blue-600"></i> 2022年完成</p> -->
                           
                            <a href="{{$value.path}}/article-{{$value.id}}.html" class="text-blue-600 font-medium">查看详情 <i class="fas fa-arrow-right ml-1"></i></a>
                        </div>
                    </div>
                    {{/each}}
                </div>
                {{/if}}
            </div>
        </section>
    </main>

    {{include './common/footer.html'}}
    {{include './common/js-common.html'}}


</body>
</html>